<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="\static\images\mini_icon.png" sizes="20x20">
    <title>Enter 新用户</title>
    <!-- 引入样式 -->
    <link href="/static/css/element.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/register.css">
</head>
    <body  style="background:url('/static/images/back1.jpg')">
        <div id="app1">
            <el-card class="box-card" id="input_list">
                <div slot="header" class="clearfix">
                    <span>添加新用户</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="FindPass()">找回密码</el-button>
                    <el-button style="float: right; padding: 3px 3px" type="text" @click="Token()">登录</el-button>
                </div>
                <div id="input_content">
                    <el-input
                        placeholder="请输入用户名"
                        maxlength="16"
                        v-model="username" show-word-limit>
                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
                    </el-input>
                    <div class="blank_div"></div>
                    <el-input
                        placeholder="请输入密码"
                        maxlength="16"
                        v-model="password" show-password show-word-limit>
                        <i slot="prefix" class="el-input__icon el-icon-key"></i>
                    </el-input>
                    <div class="blank_div"></div>
                    <el-input
                        placeholder="请输入手机号"
                        maxlength="11"
                        v-model="tel" show-word-limit>
                        <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
                    </el-input>
                    <div class="blank_div"></div>
                    <div id="tel_code">
                        <div class="div1">
                            <el-input
                                placeholder="验证码"
                                maxlength="6"
                                v-model="tel_code" show-word-limit>
                                <i slot="prefix" class="el-input__icon el-icon-news"></i>
                            </el-input>
                        </div>
                        <div class="div2">
                            <el-button plain id="cache" @click="getCache()">获取验证码</el-button>
                        </div>
                    </div>
                    <div class="blank_div"></div>
                    <el-divider><i class="el-icon-files"></i></el-divider>
                    <el-button type="success" id="user_sure_click" icon="el-icon-check" circle @click="Login()"></el-button>
                </div>
            </el-card>

            <div id="foot">
                <el-popover
                    placement="bottom-start"
                    title="注意"
                    width="200"
                    trigger="hover"
                    content="既定用户名字符长度为2-16位，且字符只限于英文字母或汉字。">
                    <el-button slot="reference">用户名规则</el-button>
                </el-popover>
                <el-popover
                    placement="bottom-start"
                    title="注意"
                    width="200"
                    trigger="hover"
                    content="既定密码长度为6-16位，且字符只限于英文字母、数字和英文状态的'.'。">
                    <el-button slot="reference">密码规则</el-button>
                </el-popover>
                <el-popover
                    placement="bottom-start"
                    title="注意"
                    width="200"
                    trigger="hover"
                    content="既定手机号长度为11位，且字符只限于数字。">
                    <el-button slot="reference">手机号规则</el-button>
                </el-popover>
                <el-popover
                    placement="bottom-start"
                    title="注意"
                    width="200"
                    trigger="hover"
                    content="用户名可作为您登录的凭证，不可重复，请谨慎考虑。注册即同意本站的免责声明。">
                    <el-button slot="reference">其他</el-button>
                </el-popover>
            </div>
        </div>


        <script src="/static/js/jquery.js"></script>
        <script src="/static/js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="/static/js/element.js"></script>
        <script src="/static/js/user_register.js"></script>
    </body>
</html>